<template>
  <div class="addList">
      <div class="addMain">
          <div class="row">
              <div class="text">博客标题：</div>
                  <div class="Box">
                      <input type="text" v-model="items.title">
                  </div>
          </div>
        
            <div class="row rowAuthor">
                <div class="text">作者：</div>
                <div class="Box">
                    <input type="text" v-model="items.author">
                </div>
            </div>

            <div class="row">
                <div class="text">分类：</div>
                <div class="Box">
                    <select v-model="items.classify">
                        <option v-for="classItem in classifyList" :key="classItem.id" :value="classItem.classname">{{classItem.classname}}</option>
                    </select>
                </div>
            </div>

            <div class="row rowArea">
                <div class="text">博客内容：</div>
                <div class="Box">
                    <textarea v-model="items.content"></textarea>
                </div>
            </div>

            <div class="row">
                <div class="text"></div>
                <div class="Box">
                    <button @click="onSubmit">发表博客</button>
                </div>
            </div>
      </div>
            <div v-show="items.title  || items.author || items.content  || items.classify ">
                <h1>博客预览</h1>
                <ItemBox :items="items"/>
            </div>
            
  </div>
</template>

<script>
import ItemBox from './ItemBox'
export default {
    name:'AddList',
    components:{ItemBox},
    data() {
        return {
            items:{
                title:'',
                author:'',
                posttime:new Date().getTime()/1000,
                classify:'',
                content:''
            },
            classifyList:[]
        }
    },
    created() {
        this.getClassify();
    },
    methods: {
        // 点击提交
        onSubmit(){
            if(this.items.title === '' ||
               this.items.content === '' ||
               this.items.classify === '' ||
               this.items.author === '' 
            ){
                alert('信息不能为空！') 
                return
                }
            this.pushData()
            alert('发布成功返回首页')
            this.$router.push('/')
        },
        pushData(){
            this.$axios({
                url:'https://ku.qingnian8.com/dataApi/blog/addBlog.php',
                params:this.items
            })
        },
        // 获取分类列表
        getClassify(){
            this.$axios({
                url:'https://ku.qingnian8.com/dataApi/blog/classBlog.php'
            }).then(res =>{
                this.classifyList = res.data
                console.log(res.data,this.classifyList);
            })
        }
    },
}
</script>

<style scoped lang="less">
input,textarea,select{outline: none;}
.addList{
    min-height: 200px;
    padding: 50px 30px;
}
.addMain{
    padding: 0 80px;
    font-size: 18px;
    color: #333;
    .row{
        padding: 10px 0;
        display: flex;
        align-items: center;
        .text{
            width: 20%;
            text-align: right;
            padding-right: 10px;
        }
        .Box{
            width: 80%;
            input,textarea{
                width: 100%;
                padding: 10px;
                height: 38px;
                border: 1px solid #ccc;
                border-radius: 3px;
                transition: 0.3s;
                font-size: 16px;
                color: #666;
                &:focus{
                    border-color: #41B883;
                    box-shadow: 0 0 10px rgba(65,184,131,0.3);
                }
            }
            select{
                width: 50%;
                height: 38px;
                border: 1px solid #ccc;
                border-radius: 3px;
                padding: 0 10px;
                font-size: 16px;
                color: #333;
            }
            textarea{
                height: 150px;
            }
            button{
                width: 50%;
                height: 38px;
                background: #41B883;
                color: #fff;
                border: none;
                border-radius: 3px;
                cursor: pointer;
                transition: 0.3s;
                &:hover{
                    background: #2F6F52;
                }
            }
        }
    }
    .rowArea{
        align-items:flex-start ;
    }
}


h1{
    font-size: 32px;color: #555;padding: 50px 0;text-align: center;
border-top: 1px solid #e4e4e4;margin-top: 30px;
}
</style>